Tailwind CSS Button Group - Versoly UI

Added in 1.0

Example

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle 1</button>
  <button type="button" class="btn btn-primary">Middle 2</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Mixed

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-tertiary">Right</button>
</div>

Outlined

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-primary btn-outline">Left</button>
  <button type="button" class="btn btn-primary btn-outline">Middle 1</button>
  <button type="button" class="btn btn-primary btn-outline">Middle 2</button>
  <button type="button" class="btn btn-primary btn-outline">Middle 3</button>
  <button type="button" class="btn btn-primary btn-outline">Right</button>
</div>

Ghost

<div class="btn-group" role="group" aria-label="Basic ghostd example">
  <button type="button" class="btn btn-ghost btn-primary">Left</button>
  <button type="button" class="btn btn-ghost btn-primary">Middle</button>
  <button type="button" class="btn btn-ghost btn-primary">Right</button>
</div>

Sizes

<div class="col">
  <div class="btn-group btn-group-xs" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>
<div class="col">
  <div class="btn-group btn-group-sm" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>
<div class="col">
  <div class="btn-group btn-group-null" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>
<div class="col">
  <div class="btn-group btn-group-lg" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>
<div class="col">
  <div class="btn-group btn-group-xl" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>